<script>
// 组名编辑弹窗
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'EditImg',
})
</script>
<script setup>
import { qrLinkOrignalForm } from '@/data'
import { deepClone, isEmpty } from '@/utils'
import { reqRadarList } from "@/api";
import { ref, defineExpose, reactive } from 'vue'
import { toRaw } from '@vue/reactivity'
import { ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
const searchVal = ref('')


const isRefresh = ref(true)
const handleRefresh = () => {
  isRefresh.value = false
  isRefresh.value = true
}
const tableData = ref([])
const total = ref(0)
const page = ref(1)
const getData = (val)=>{
  if (val) page.value = val
    reqRadarList({
        page:page.value,size:10,title:searchVal.value
  }).then((res) => {
      total.value = res.data.count
	    tableData.value = res.data.item
  })
}
const dialogVisible = ref(false)

const show = (val) => {
  dialogVisible.value = true
  getData(1)
}
const cancel = (done) => {
  dialogVisible.value = false
}
const selectIndex = ref(-1)
const selectData = ref([])
const chooseRadar = (val)=>{
  selectIndex.value = val
  var arr = tableData.value
  selectData._value = arr[val]
}
const submit = () => {
  emits('getDiaData',selectData.value)
  dialogVisible.value = false
}
const emits = defineEmits(['getDiaData'])
defineExpose({
  show,
})
</script>
<template>
  <div v-if="dialogVisible">
    <el-dialog
      v-model="dialogVisible"
      :title="'选择雷达'"
      width="700px"
      :before-close="cancel"
    >
    <el-input
          v-model="searchVal"
          size="large"
          @input="getData(1)"
          placeholder="请输入名称"
          clearable
          suffix-icon="Search"
        />
      <div>
        <div class="inline-module">
          <div class="inline-box box-200" style="display: inline-block;margin: 4px;" v-for="(item,index) in tableData" :key="index">
          <div @click="chooseRadar(index)">
            <div class="app-flex-2">
              <div>
                <el-tag type="primary" class="app-primary-font">
								链接
                </el-tag>
                <span class="app-gap-words-left-s">{{item.link_title}}</span>
              </div>
              <div class="a-check-circle">
                <MyIcon v-if="selectIndex==index" style="color:#999 !important" name="Check" />
              </div>
            </div>
            <div class="app-flex-2" style="margin-top:8px">
              <div style="width: calc(100% - 80px);">
                <div class="word-esp">
                  {{item.title}}
                </div>
                <div class="inline-desc word-esp">
                  {{item.description}}
                </div>
              </div>
              <el-image class="box-80" :src="item.image_url" fit="contain" />
            </div>
            
						
          </div>
            
          </div>
        </div>
			</div>

<el-pagination :current-page="page" class="app-page" @current-change="getData" background layout="prev, pager, next" :total="total" />
     
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
